<template>
  <view class="test-page">
    <view class="test-header">
      <text class="test-title">购物车功能测试</text>
    </view>
    
    <view class="test-section">
      <text class="section-title">模拟添加商品到购物车</text>
      
      <view class="test-item">
        <text class="item-label">商品ID:</text>
        <input class="item-input" v-model="testProduct.productId" placeholder="输入商品ID" />
      </view>
      
      <view class="test-item">
        <text class="item-label">SKU ID:</text>
        <input class="item-input" v-model="testProduct.skuId" placeholder="输入SKU ID" />
      </view>
      
      <view class="test-item">
        <text class="item-label">商品名称:</text>
        <input class="item-input" v-model="testProduct.name" placeholder="输入商品名称" />
      </view>
      
      <view class="test-item">
        <text class="item-label">商品价格:</text>
        <input class="item-input" v-model="testProduct.price" type="number" placeholder="输入价格" />
      </view>
      
      <view class="test-item">
        <text class="item-label">购买数量:</text>
        <input class="item-input" v-model="testProduct.quantity" type="number" placeholder="输入数量" />
      </view>
      
      <view class="test-buttons">
        <button class="test-btn add-btn" @click="addToCart">添加到购物车</button>
        <button class="test-btn view-btn" @click="viewCart">查看购物车</button>
      </view>
    </view>
    
    <view class="test-section">
      <text class="section-title">快速测试数据</text>
      <view class="quick-test-buttons">
        <button class="quick-btn" @click="loadTestData1">测试商品1</button>
        <button class="quick-btn" @click="loadTestData2">测试商品2</button>
        <button class="quick-btn" @click="clearCache">清除缓存</button>
      </view>
    </view>
    
    <view class="test-section">
      <text class="section-title">当前用户信息</text>
      <view class="user-info">
        <text class="info-text">用户ID: {{ userId }}</text>
        <text class="info-text">购物车商品数: {{ cartCount }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import { addCart, getUserCartList } from '@/api/cart'
import cartCache from '@/utils/cartCache'

export default {
  data() {
    return {
      userId: '',
      cartCount: 0,
      testProduct: {
        productId: '',
        skuId: '',
        name: '',
        price: '',
        quantity: '1'
      }
    }
  },
  
  onLoad() {
    this.userId = uni.getStorageSync('userId') || 'test_user_' + Date.now()
    if (!uni.getStorageSync('userId')) {
      uni.setStorageSync('userId', this.userId)
    }
    this.updateCartCount()
  },
  
  methods: {
    loadTestData1() {
      this.testProduct = {
        productId: '1001',
        skuId: '2001',
        name: '测试商品1 - 苹果手机',
        price: '5999',
        quantity: '1'
      }
    },
    
    loadTestData2() {
      this.testProduct = {
        productId: '1002',
        skuId: '2002',
        name: '测试商品2 - 华为手机',
        price: '4999',
        quantity: '2'
      }
    },
    
    async addToCart() {
      if (!this.testProduct.productId || !this.testProduct.name) {
        uni.showToast({
          title: '请填写商品信息',
          icon: 'none'
        })
        return
      }
      
      try {
        // 构建购物车数据
        const cartData = {
          productId: this.testProduct.productId,
          skuId: this.testProduct.skuId || null,
          quantity: parseInt(this.testProduct.quantity) || 1
        }
        
        console.log('添加到购物车的数据:', cartData)
        
        // 模拟后端响应（实际项目中这里会调用真实的API）
        const mockResponse = {
          code: 200,
          data: {
            cartId: Date.now()
          },
          msg: '添加成功'
        }
        
        if (mockResponse.code === 200) {
          // 构建缓存数据项
          const cacheItem = {
            cartId: mockResponse.data.cartId,
            productId: this.testProduct.productId,
            skuId: this.testProduct.skuId || null,
            productName: this.testProduct.name,
            productPrice: parseFloat(this.testProduct.price) || 0,
            productImage: '/static/images/default-product.png',
            skuName: this.testProduct.skuId ? `SKU-${this.testProduct.skuId}` : '默认规格',
            quantity: parseInt(this.testProduct.quantity) || 1,
            checked: 'Y'
          }
          
          // 添加到缓存
          cartCache.addToCartCache(this.userId, cacheItem)
          
          // 设置刷新标记
          uni.setStorageSync('refreshCart', true)
          
          // 更新计数
          this.updateCartCount()
          
          uni.showToast({
            title: '添加成功',
            icon: 'success'
          })
          
          console.log('商品已添加到购物车缓存')
        }
      } catch (error) {
        console.error('添加购物车失败:', error)
        uni.showToast({
          title: '添加失败',
          icon: 'none'
        })
      }
    },
    
    viewCart() {
      uni.switchTab({
        url: '/pages/cart/index'
      })
    },
    
    clearCache() {
      cartCache.clearCartCache(this.userId)
      this.updateCartCount()
      uni.showToast({
        title: '缓存已清除',
        icon: 'success'
      })
    },
    
    updateCartCount() {
      if (cartCache.isCacheValid(this.userId)) {
        const cachedData = cartCache.getCartCache(this.userId)
        this.cartCount = cachedData.length
      } else {
        this.cartCount = 0
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.test-page {
  padding: 30rpx;
  background: #f5f5f5;
  min-height: 100vh;
}

.test-header {
  text-align: center;
  margin-bottom: 40rpx;
  
  .test-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
  }
}

.test-section {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
  
  .section-title {
    font-size: 28rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 30rpx;
    display: block;
  }
}

.test-item {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  
  .item-label {
    width: 160rpx;
    font-size: 26rpx;
    color: #666;
  }
  
  .item-input {
    flex: 1;
    padding: 20rpx;
    border: 1px solid #ddd;
    border-radius: 8rpx;
    font-size: 26rpx;
  }
}

.test-buttons {
  display: flex;
  gap: 20rpx;
  margin-top: 30rpx;
  
  .test-btn {
    flex: 1;
    padding: 25rpx;
    border-radius: 12rpx;
    font-size: 28rpx;
    font-weight: bold;
    border: none;
    
    &.add-btn {
      background: #4A90E2;
      color: #fff;
    }
    
    &.view-btn {
      background: #FF6B35;
      color: #fff;
    }
  }
}

.quick-test-buttons {
  display: flex;
  gap: 15rpx;
  flex-wrap: wrap;
  
  .quick-btn {
    padding: 20rpx 30rpx;
    background: #E8F4FD;
    color: #4A90E2;
    border-radius: 8rpx;
    font-size: 24rpx;
    border: 1px solid #4A90E2;
  }
}

.user-info {
  .info-text {
    display: block;
    font-size: 26rpx;
    color: #666;
    margin-bottom: 10rpx;
  }
}
</style>